<template>
  <div style="padding: 40px">
    <div
      class="mb20"
      style="font-weight: 700; font-style: normal; font-size: 16px"
    >
      基本信息
    </div>
    <!-- :rules="rules" -->
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      label-position="left"
      v-loading="loading"
    >
      <div class="r">
        <el-form-item label="病区" prop="deptId" style="width: 49%">
          <!-- <el-input v-model="form.deptId" placeholder="请输入科室/病区" /> -->
          <treeselect
            v-model="form.deptId"
            :options="deptOptions"
            :show-count="true"
            placeholder="请选择科室/病区"
          />
        </el-form-item>
        <el-form-item
          label="流水号"
          prop="medicalRecordNo"
          style="width: 52%; padding-left: 41px"
        >
          <el-input
            disabled
            v-model="form.medicalRecordNo"
            placeholder="请输入流水号"
            @keyup.enter.native="submitForm"
          />
        </el-form-item>
      </div>

      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="床号" prop="bedNo">
            <el-input
              v-model="form.bedNo"
              placeholder="请输入床号"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="病案号" prop="medicareNo">
            <el-input
              disabled
              v-model="form.medicareNo"
              placeholder="请输入病案号"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="姓名" prop="patientName">
            <el-input
              v-model="form.patientName"
              placeholder="请输入患者姓名"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" prop="phoneNo">
            <el-input
              v-model="form.phoneNo"
              placeholder="请输入联系方式"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="ID号" prop="patientNo">
            <el-input
              v-model="form.patientNo"
              placeholder="请输入ID号"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="patientSex">
            <!-- <el-input v-model="form.guardianLevel" placeholder="请选择性别" /> -->
            <el-select
              v-model="form.patientSex"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in userSex"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="年龄" prop="patientAge" :error="errormsg1">
            <!-- <el-input
              v-model="form.patientAge"
              placeholder="请输入年龄"
              @keyup.enter.native="submitForm"
            /> -->
            <el-input
              v-if="year == 1"
              clearable
              v-model="form.patientAge"
              placeholder="请输入年龄"
              @keyup.enter.native="submitForm"
              @input="input1"
            >
              <el-select
                v-model="year"
                slot="append"
                placeholder="请选择"
                style="width: 70px"
                @change="handleChange"
              >
                <el-option label="岁" value="1"></el-option>
                <el-option label="月" value="2"></el-option>
              </el-select>
            </el-input>
            <el-input
              v-else
              v-model="form.patientMonth"
              placeholder="请输入月份"
              clearable
              @keyup.enter.native="submitForm"
              @input="input2"
            >
              <el-select
                v-model="year"
                slot="append"
                placeholder="请选择"
                style="width: 70px"
                @change="handleChange"
              >
                <el-option label="岁" value="1"></el-option>
                <el-option label="月" value="2"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthdate">
            <el-input
              disabled
              v-model="form.birthdate"
              placeholder="请输入出生日期"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="职业" prop="patientProfession">
            <el-input
              v-model="form.patientProfession"
              placeholder="请输入职业"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="民族" prop="nation">
            <el-input
              v-model="form.nation"
              placeholder="请输入民族"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="身高 (cm)" prop="patientHeight">
            <el-input
              v-model="form.patientHeight"
              placeholder="请输入身高"
              @focus="handleBmi"
              @input="handleBmi"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体重 (kg)" prop="patientWeight">
            <el-input
              v-model="form.patientWeight"
              placeholder="请输入体重"
              @focus="handleBmi"
              @input="handleBmi"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="BMI (kg/m²)" prop="patientBmi">
            <el-input
              v-model="form.patientBmi"
              placeholder="请输入BMI"
              @keyup.enter.native="submitForm"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="费别" prop="payWay">
            <!-- <el-input v-model="form.payWay" placeholder="请输入费别" /> -->
            <el-select
              v-model="form.payWay"
              placeholder="请选择费别"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in payWay"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="监护分级" prop="guardianLevel">
            <el-select
              v-model="form.guardianLevel"
              placeholder="请选择监护分级"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in guardianLevel"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align: center">
        <el-button
          v-hasPermi="['workstation:baseInfo:add']"
          :loading="buttonLoading"
          type="primary"
          @click="submitForm"
          style="background-color: #1292b9"
          >确 定</el-button
        >
      </div>

      <!-- <el-form-item label="入院时间" prop="admissionDate">
        <el-date-picker
          clearable
          v-model="form.admissionDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择入院时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="主管医生" prop="doctorId">
        <el-input v-model="form.doctorId" placeholder="请输入主管医生" @focus="getDoctorList" />
        <el-select
          v-model="form.doctorId"
          placeholder="请选择主管医生"
          @focus="getDoctorList"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in DoctorList"
            :key="index"
            :label="item.nickName"
            :value="item.deptId"
          ></el-option>
        </el-select>
      </el-form-item>  
      <el-form-item label="第一诊断" prop="firstDiagnose">
        <el-input v-model="form.firstDiagnose" placeholder="请输入第一诊断" />
      </el-form-item>
      <el-form-item label="住院状态" prop="patientState">
        <el-input v-model="form.patientState" placeholder="请输入住院状态" />
      </el-form-item>
      <el-form-item label="数据来源" prop="sourceInfo">
        <el-input v-model="form.sourceInfo" placeholder="请输入数据来源" />
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
} from "@/api/system/user";
import { getDicts } from "@/api/system/dict/data";
import {
  getBaseInfo,
  addBaseInfo,
  updateBaseInfo,
  leave,
} from "@/api/workstation/baseInfo";
export default {
  name: "basicMessage",
  components: { Treeselect },
  props: ["id"],
  data() {
    // 年龄校验
    let patter = /^(0|[1-9]\d?|1[01]\d|120)$/;
    let isNumber = (rule, value, callback) => {
      if (!patter.test(value)) {
        return callback(new Error("年龄范围为 0 ~ 120"));
      } else {
        callback();
      }
    };
    // 月份校验
    let mouth = /^(?:1[0-2]|[1-9])$/;
    let ismouth = (rule, value, callback) => {
      if (!mouth.test(value)) {
        return callback(new Error("月份范围为 1 ~ 12"));
      } else {
        callback();
      }
    };
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        // id: [{ required: true, message: "患者ID不能为空", trigger: "blur" }],
        // patientName: [
        //   { required: true, message: "患者姓名不能为空", trigger: "blur" },
        // ],
        // medicalRecordNo: [
        //   { required: true, message: "流水号不能为空", trigger: "blur" },
        // ],
        // patientNo: [
        //   { required: true, message: "ID号不能为空", trigger: "blur" },
        // ],
        // deptId: [
        //   { required: true, message: "科室/病区不能为空", trigger: "blur" },
        // ],
        // admissionDate: [
        //   { required: true, message: "入院时间不能为空", trigger: "blur" },
        // ],
        // doctorId: [
        //   { required: true, message: "主管医生不能为空", trigger: "blur" },
        // ],
        // bedNo: [{ required: true, message: "床号不能为空", trigger: "blur" }],
        // firstDiagnose: [
        //   { required: true, message: "第一诊断不能为空", trigger: "blur" },
        // ],
        // guardianLevel: [
        //   { required: true, message: "监护分级不能为空", trigger: "blur" },
        // ],
        // patientState: [
        //   { required: true, message: "住院状态不能为空", trigger: "blur" },
        // ],
        // patientSex: [
        //   { required: true, message: "患者性别不能为空", trigger: "blur" },
        // ],
        patientAge: [{ validator: isNumber, trigger: "blur" }],
        // patientMonth: [
        //   { validator: ismouth , trigger: "blur" },
        // ],
        // patientProfession: [
        //   { required: true, message: "职业不能为空", trigger: "blur" },
        // ],
        // nation: [{ required: true, message: "民族不能为空", trigger: "blur" }],
        // patientHeight: [
        //   { required: true, message: "身高不能为空", trigger: "blur" },
        // ],
        // patientWeight: [
        //   { required: true, message: "体重不能为空", trigger: "blur" },
        // ],
        // patientBmi: [
        //   { required: true, message: "BMI不能为空", trigger: "blur" },
        // ],
        // phoneNo: [
        //   { required: true, message: "联系方式不能为空", trigger: "blur" },
        // ],
        // payWay: [
        //   { required: true, message: "费别不能为空", trigger: "blur" },
        // ],
        // sourceInfo: [
        //   { required: true, message: "数据来源不能为空", trigger: "blur" },
        // ],
      },
      // 部门树选项
      deptOptions: [],
      // 按钮loading
      buttonLoading: false,
      guardianLevel: [], // 监护分级
      patientState: [], // 住院状态
      userSex: [], // 患者性别
      payWay: [], // 费别
      loading: true,
      year: "1",
      month: "2",
      errormsg1: "",
    };
  },
  created() {
    this.getDeptTree();
    // 字典查询  监护分级
    getDicts("guardian_level").then((res) => {
      // console.log(res.data);
      this.guardianLevel = res.data;
    });
    // 字典查询  住院状态
    getDicts("patient_state").then((res) => {
      // console.log(res.data);
      this.patientState = res.data;
    });
    // 字典查询  患者性别
    getDicts("sys_user_sex").then((res) => {
      // console.log(res.data);
      this.userSex = res.data;
    });
    // 字典查询  费别
    getDicts("pay_way").then((res) => {
      // console.log(res.data);
      this.payWay = res.data;
    });
    this.getBaseInfo();
  },
  methods: {
    input1(val) {
      if (!val) {
        this.errormsg1 = ""
        return;
      }
      const value = val.trim(); // 获取输入框的值，并去除空格
      let reg = /^(0|[1-9]\d?|1[01]\d|120)$/;
      if (!reg.test(value)) {
        // 如果输入的值不符合要求，则清空输入框
        this.errormsg1 = "请输入0-120的整数";
        this.form.patientBaseInfoVo.patientAge = "";
      } else {
        this.errormsg1 = "";
      }
    },
    input2(val) {
      if (!val) {
        return;
      }
      const value = val.trim(); // 获取输入框的值，并去除空格
      let reg = /^(0|[1-9]\d?|1[01]\d|12)$/;
      if (!reg.test(value)) {
        // 如果输入的值不符合要求，则清空输入框
        this.errormsg1 = "请输入0-12的整数";
        this.form.patientBaseInfoVo.patientMonth = "";
      } else {
        this.errormsg1 = "";
      }
    },
    // 计算bmi指数
    handleBmi() {
      if (!this.form.patientWeight || !this.form.patientHeight) {
        return;
      }
      this.form.patientBmi =
        this.form.patientWeight /
        ((this.form.patientHeight / 100) * (this.form.patientHeight / 100));
      console.log(this.form.patientBmi);
      this.form.patientBmi =
        String(this.form.patientBmi).slice(0, 5) ||
        this.form.patientBmi.toFixed(2); // 保留两位小数
    },
    // 获取详细信息
    getBaseInfo() {
      this.loading = true;
      getBaseInfo(this.id).then((res) => {
        // console.log("[ res.data ] >", res.data);
        this.form = res.data;
        this.form.patientProfession = this.form.patientProfession ? this.form.patientProfession : '无'
        this.loading = false;
      });
    },
    /** 查询科室下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 年龄查看年和月
    handleChange(data) {
      console.log("[ data ] >", data);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log("[ this.form ] >", this.form);
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateBaseInfo(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getBaseInfo();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addBaseInfo(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style></style>
